<template>
  <div class="cs-page-container es-visual">
    <el-form label-width="100px">
      <el-form-item label="日期范围">
        <el-date-picker
          v-model="daterangeValue"
          :picker-options="daterangePickerOptions"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="创建起始时间"
          end-placeholder="创建结束时间"
          value-format="yyyy/MM/dd"
          @change="onDateRangeChange"
        />
      </el-form-item>
      <el-form-item label="字段名称">
        <el-input></el-input>
      </el-form-item>
      <el-form-item label="字段KEY">
        <el-input></el-input>
      </el-form-item>
      <el-divider></el-divider>
      <el-form-item label="聚合字段名">
        <el-input></el-input>
      </el-form-item>
      <el-form-item label="buckets_path">
        <el-input></el-input>
      </el-form-item>
      <el-form-item label="script">
        <el-input></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="mini">添加过滤</el-button>
      </el-form-item>
      <el-divider></el-divider>
    </el-form>
    <el-button type="primary">添加聚合</el-button>
  </div>
</template>
<script>
export default {
  data(){
    return {
      daterangeValue:""
    }
  },
  methods:{
    onDateRangeChange(dateRange){

    }
  }
}
</script>
<style lang="scss">
.es-visual {
  .el-input {
    width: auto;
  }
}
</style>